<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<title>emplist</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>
	<body>
		<div id="wrap">
			<div id="top_content"> 
				<div id="header">
					<div id="rightheader">
						<p>
							2009/11/20 
							<br />
							<a href="javascript:;" v-on:click="logout">安全退出</a>
						</p>
					</div>
					<div id="topheader">
						<h1 id="title">
							<a href="/emsvue/emplist.html">主页</a>
						</h1>
					</div>
					<div id="navigation">
					</div>
				</div>
				<div id="content">
					<p id="whereami">
					</p>
					<h1>
						欢迎 {{user.realname}}!
					</h1>
					<div>
						<table>
							<thead>
							<tr>
								<td >员工姓名:<input style="width: 75px;" type="text" v-model="EmpCondition.name"></td>
								<td >最低年龄:<input style="width: 75px;" type="text" v-model="EmpCondition.minAge"></td>
								<td >最高年龄:<input style="width: 75px;" type="text" v-model="EmpCondition.maxAge"></td>
								<td >最低薪资:<input style="width: 75px;" type="text" v-model="EmpCondition.minSalary"></td>
								<td >最高薪资:<input style="width: 75px;" type="text" v-model="EmpCondition.maxSalary"></td>
								<td ><input type="button" value="搜索" v-on:click="Search"></td>
							</tr>
							</thead>
						</table>

					</div>

					<table class="table">
						<tr class="table_header">
							<td>
								ID
							</td>
							<td>
								Name
							</td>
							<td>
								Photo
							</td>
							<td>
								Salary
							</td>
							<td>
								Age
							</td>
							<td>
								Operation
							</td>
						</tr><!-- v-for="(emp,index) in emps" :key="emp.id" -->
						<tr v-for="emp,index in emps" :key="emp.id" class=" index%2==0?'row1':'row2' ">
							<td>
								{{emp.id}}
							</td>
							<td>
								{{emp.name}}
							</td>
							<td><!--  :src="  '/ems_vue/'+emp.path  "  -->
								<img :src=" '/emsvue/'+emp.path " style="height: 60px;">
							</td>
							<td>
								{{emp.salary}}
							</td>
							<td>
								{{emp.age}}
							</td>
							<td>                                                      <!--<a :href=" '/ems_vue/updateEmp.html?id='+emp.id ">updat emp</a> "-->
								<a href="javascript:;" v-on:click="delEmp(emp.id)">删除</a>&nbsp;<a :href=" '/emsvue/updateEmp.html?id='+emp.id ">更新</a>
							</td>
						</tr>
					</table>
					<table class="table">
						<th>
							<td>总记录数:{{rowCount}}</td>
							<td>总页数:{{pageCount}}</td>
							<td>当前页:{{page}}</td>
							<td><a href="javascript:;" v-on:click="firstly">首页</a></td>
							<td><a href="javascript:;" v-on:click="pageSubtract">上一页</a></td>
							<td><a href="javascript:;" v-on:click="pageAdd">下一页</a></td>
						<td><a href="javascript:;" v-on:click="last">尾页</a></td>
						</th>
					</table>
				</div>
			</div>
			<div id="footer"><!--footer_bg-->
				<div id="footer_bg">
				ABC@126.com
					<span id="you2">
						<input type="button" class="button" value="添加员工信息" onclick=" location='addEmp.html' "/>
					</span>
				</div>

			</div>
		</div>
	</body>
</html>

<script src="/emsvue/js/vue.js"></script>
<script src="/emsvue/js/axios.min.js"></script>
<script>
	var app = new Vue({
		el: "#wrap",
		data: {  //数据
			user: { //用来存放用户登录信息
				realname: "",
			},
			emps: [],//分页查询的结果
			rowCount:"",//数据库总行数
			pageCount:"",//总页数
			page:1,//页码值
			rows:"5",//当前页行数
			EmpCondition:{name:"",minAge:0,maxAge:1000,minSalary:0,maxSalary:100000},
			sign:false,
		},
		methods: { //自定义函数
			firstly(){//跳转到首页
				this.page=1;
				this.findAllPage();
			},
			last(){//跳转到尾页
				this.page=this.pageCount;
				this.findAllPage();
			},
			Search(){//按条件执行搜索
				this.sign=true;
				this.page=1;
				console.log("搜索矿中的数据分别如下:");
				console.log("页码:"+this.page);
				console.log("姓名:"+this.EmpCondition.name);
				console.log("年龄:"+this.EmpCondition.minAge);
				console.log("薪资:"+this.EmpCondition.minSalary);
				console.log("年龄:"+this.EmpCondition.maxAge);
				console.log("薪资:"+this.EmpCondition.maxSalary);
				this.findAllPage();
			},
			pageAdd(){//下一页
				if(this.page<this.pageCount){
					this.page=this.page+1;
					console.log("页码值自增后的结果+++"+this.page);
					this.findAllPage();
				}else{
					alert("已经是最后一页")
				}
			},
			pageSubtract(){//上一页
				if(this.page>1){
					this.page=this.page-1;
					console.log("页码值自减后的结果---"+this.page);
					this.findAllPage();
				}else{
					alert("已经是第一页")
				}
			},
			logout() { //处理安全退出
				localStorage.removeItem("user");
				location.reload(true);//刷新页面
			},
			delEmp(id) {//根据id删除员工信息方法

				if(window.confirm("确定要删除这条员工信息吗?")){
					var _this = this;
					axios.get("http://localhost:8990/emsvue/emp/delete?id="+id).then(res => {
						if (res.data.state) {
							alert(res.data.msg + ",点击确定刷新数据!");
							_this.findAllPage();//重新加载数据
						} else {
							alert(res.data.msg);
						}
					});
				}
			},
			findAllPage() { //查询员工列表方法
				console.log("进入findAllPage方法后的page="+this.page);
				var _this = this;/*http://localhost:8990/emsvue/emp/findAllPage?page=1&rows=5&minAge=0*/
				axios.get("http://localhost:8990/emsvue/emp/findAllPage?page="+this.page+"&rows=5&name="+this.EmpCondition.name+"&minAge="+this.EmpCondition.minAge+"&maxAge="+this.EmpCondition.maxAge+"&minSalary="+this.EmpCondition.minSalary+"&maxSalary="+this.EmpCondition.maxSalary).then(res => {
					_this.emps = res.data.emps;//分页查询结果
					_this.rowCount= res.data.rowCount;//数据库总行数
					_this.pageCount=res.data.pageCount;//分页后的总页数

				});
			},
		},
		created() {//生命周期函数
			var userString = localStorage.getItem("user");
			if (userString) {//userString有值说明已经登录
				this.user = JSON.parse(userString);
			} else {
				//alert("您尚未登录,点击确定跳转至登录页面!");
				location.href = "/emsvue/login.html";
			}
			//查询所有信息
			console.log("created()函数执行了,获取的数据如下:");
			console.log("当前页码:"+this.page);
			console.log("姓名:"+this.EmpCondition.name);
			console.log("年龄:"+this.EmpCondition.minAge);
			console.log("薪资:"+this.EmpCondition.minSalary);
			console.log("年龄:"+this.EmpCondition.maxAge);
			console.log("薪资:"+this.EmpCondition.maxSalary);
			this.findAllPage();
		}
	});
</script>

